<template>
    <div>
      <Nav></Nav>
      <Shopnav></Shopnav>

      <div class="content">
        <div class="tit">
          <img src="/static/lyl/dagou.png" alt="">
          <span>购物车</span>
        </div>
        <div class="content-foot">
          <div class="d1">
            <span @click="ishow()"><img v-if="bol" src="/static/lyl/xuan1.png" alt=""></span>
            <span v-for="item in data">{{item}}</span>
          </div>
          <ul>
            <li v-for="(item,index) in arr">
              <span @click="xuan(index)"><img v-if="item.bol2" :src="item.src" alt=""></span>
              <img :src="item.src2" alt="">
              <span class="d3">{{item.txt}}</span>
              <span class="d4">{{item.txt2}}</span>
              <span>{{item.txt3}}{{item.n}}</span>
              <div class="jia">
                <span @click="jian2(index)">-</span>
                <span>{{item.num}}</span>
                <span @click="jia2(index)">+</span>
              </div>
              <span>￥{{item.sum}}</span>
              <span @click="dels(index)" class="d5">删除</span>
            </li>
          </ul>
          <div class="didi">
            <span>商品金额</span>
            <span>￥{{sum3}}</span>
          </div>
        </div>

        <div class="content-foot">
          <div class="d1">
            <span @click="ishow2()"><img v-if="bol2" src="/static/lyl/xuan1.png" alt=""></span>
            <span v-for="item in data">{{item}}</span>
          </div>
          <ul>
            <li v-for="(item,index) in arr2">
              <span @click="xuan2(index)"><img v-if="item.bol2" :src="item.src" alt=""></span>
              <img :src="item.src2" alt="">
              <span class="d3">{{item.txt}}</span>
              <span class="d4">{{item.txt2}}</span>
              <span>{{item.txt3}}{{item.n}}</span>
              <div class="jia">
                <span @click="jian4(index)">-</span>
                <span>{{item.num}}</span>
                <span @click="jia4(index)">+</span>
              </div>
              <span>￥{{item.sum}}</span>
              <span @click="dels2(index)" class="d5">删除</span>
            </li>
          </ul>
          <div class="didi">
            <span>商品金额</span>
            <span>￥{{sum4}}</span>
          </div>
        </div>

        <div class="all">
          <div class="all-left">
            <span @click="allxuan()">全选</span>
            <span @click="delall()">批量删除</span>
          </div>
          <div class="all-right">
            <span>商品总计：</span>
            <span>￥{{sum3+sum4}}</span>
            <router-link to="/shouhuo1/2">
              <button>立即购买</button>
            </router-link>
          </div>
        </div>
      </div>

      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Footer from '../com/Footer'
  import Shopnav from './Shopnav'
    export default {
      name: "Shopyes",
      data(){
        return {
          bol:true,
          bol2:true,
          data:['爱果果水果店','规格','单价','数量','金额','操作'],
          arr:[
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:569,num:1,sum:569},
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:500,num:1,sum:500},
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:469,num:1,sum:469}
          ],
          arr2:[
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:369,num:1,sum:369},
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:200,num:1,sum:200},
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:500,num:1,sum:500}
          ]
        }
      },
      methods:{
        ishow(){
          this.bol = !this.bol;
          for (let i = 0; i < this.arr.length; i++) {
            this.arr[i].bol2 = true;
          }
        },
        ishow2(){
          this.bol2 = !this.bol2;
          for (let i = 0; i < this.arr2.length; i++) {
            this.arr2[i].bol2 = true;
          }
        },
        xuan(i){
          this.arr[i].bol2 = !this.arr[i].bol2;
          this.bol = false;
        },
        xuan2(i){
          this.arr2[i].bol2 = !this.arr2[i].bol2;
          this.bol2 = false;
        },
        jian2(i){
          this.arr[i].num-=1;
          if (this.arr[i].num<0) {
            this.arr[i].num = 0;
          }
          if (this.arr[i].num>0) {
            this.arr[i].bol2 = true;
          }else {
            this.arr[i].bol2 = false;
          }
          this.arr[i].sum = this.arr[i].n*this.arr[i].num;
        },
        jian4(i){
          this.arr2[i].num-=1;
          if (this.arr2[i].num<0) {
            this.arr2[i].num = 0;
          }
          if (this.arr2[i].num>0) {
            this.arr2[i].bol2 = true;
          }else {
            this.arr2[i].bol2 = false;
          }
          this.arr2[i].sum = this.arr2[i].n*this.arr2[i].num;
        },
        jia2(i){
          this.arr[i].num+=1;
          if (this.arr[i].num>0) {
            this.arr[i].bol2 = true;
          }else {
            this.arr[i].bol2 = false;
          }
          this.arr[i].sum = this.arr[i].n*this.arr[i].num;
        },
        jia4(i){
          this.arr2[i].num+=1;
          if (this.arr2[i].num>0) {
            this.arr2[i].bol2 = true;
          }else {
            this.arr2[i].bol2 = false;
          }
          this.arr2[i].sum = this.arr2[i].n*this.arr2[i].num;
        },
        dels(i){
          this.arr.splice(i,1);
        },
        dels2(i){
          this.arr2.splice(i,1);
        },
        allxuan(){
          for (let i = 0; i < this.arr.length; i++) {
            this.arr[i].bol2 = true;
          }
          for (let j = 0; j < this.arr2.length; j++) {
            this.arr2[j].bol2 = true;
          }
        },
        delall(){
          for (let i = this.arr.length-1; i >= 0; i--) {
            if (this.arr[i].bol2) {
              this.arr.splice(i,1);
            }
          }
          for (let j = this.arr2.length-1; j >= 0; j--) {
            if (this.arr2[j].bol2) {
              this.arr2.splice(j,1);
            }
          }
        }
      },
      computed:{
        sum3(){
          var a = 0;
          for (let i = 0; i < this.arr.length; i++) {
            a+=this.arr[i].sum;
          }
          return a;
        },
        sum4(){
          var b = 0;
          for (let j = 0; j < this.arr2.length; j++) {
            b+=this.arr2[j].sum;
          }
          return b;
        }
      },
      components:{
        Nav,
        Footer,
        Shopnav
      }
    }
</script>

<style scoped>
  .content{
    width: 1280px;
    margin: auto;
  }
  .tit{
    padding: 20px 0;
  }
  .tit img{
    width: 22px;
    height: 22px;
  }
  .tit span{
    font-size: 18px;
    color: #666;
    margin-left: 15px;
    vertical-align: top;
  }
  .content-foot{
    border: 1px solid #e9e9e9;
    margin-bottom: 20px;
  }
  .content-foot .d1{
    background: #f2f2f2;
    padding: 15px 0 15px 20px;
  }
  .content-foot .d1 span{
    font-size: 16px;
    vertical-align: top;
  }
  .content-foot .d1 span:nth-child(1){
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #d3d3d3;
    margin-right: 20px;
    vertical-align: bottom;
  }
  .content-foot span:nth-child(1) img{
    position: absolute;
  }
  .content-foot .d1 span{
    margin-right: 148px;
  }
  .content-foot .d1 span:nth-child(2){
    margin-right: 320px;
  }
  .content-foot .d1 span:nth-child(7){
    margin-right: 0;
  }
  .content-foot ul li{
    padding: 20px 0 20px 20px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
  }
  .content-foot ul li span{
    font-size: 14px;
    color: #666;
    align-self: center;
  }
  .content-foot ul li span:nth-child(1){
    width: 15px;
    height: 15px;
    border: 1px solid #e9e9e9;
    margin-right: 20px;
  }
  .content-foot ul li .d3{
    margin-right: 190px;
  }
  .content-foot ul li .d4{
    margin-right: 140px;
  }
  .content-foot ul li .d5{
    color: #498e3d;
    margin-left: 145px;
    cursor: pointer;
  }
  .content-foot ul li>img{
    width: 80px;
    height: 80px;
    border: 1px solid #e9e9e9;
    margin-right: 20px;
  }
  .content-foot ul li .jia{
    display: flex;
    margin: 0 110px;
  }
  .content-foot ul li .jia span{
    width: 28px;
    height: 28px;
    border: 1px solid #e9e9e9;
    text-align: center;
    line-height: 28px;
    font-size: 16px;
    color: #666;
    margin: 0;
    background: #f2f2f2;
    cursor: pointer;
  }
  .content-foot ul li .jia span:nth-child(2){
    width: 48px;
    background: #fff;
    border-right: 0;
    border-left: 0;
  }
  .content-foot .didi{
    padding: 30px 30px 30px 0;
    text-align: right;
  }
  .content-foot .didi span{
    font-size: 18px;
  }
  .content-foot .didi span:nth-child(2){
    color: #ff5757;
    margin-left: 20px;
  }
  .content .all{
    display: flex;
    justify-content: space-between;
    padding: 20px 0 40px 20px;
  }
  .content .all .all-left span{
    font-size: 14px;
    color: #498e3d;
    cursor: pointer;
    margin-right: 46px;
  }
  .content .all .all-right span{
    font-size: 18px;
  }
  .content .all .all-right span:nth-child(2){
    font-size: 20px;
    color: #ff5757;
  }
  .content .all .all-right button{
    width: 150px;
    height: 50px;
    border-radius: 5px;
    color: #fff;
    font-size: 20px;
    background: #f08200;
    margin-left: 30px;
    cursor: pointer;
  }
</style>
